
    <div class="container mx-auto bg-gradient-to-br my-10 flex flex-col justify-center items-center overflow-hidden" >
        <!-- top -->
        <div class=" w-full">
            <div class="swiper top-banner h-[300px]  w-full mx-auto" x-data="{
            init(){
                new Swiper('.top-banner', {
                    autoplay: {
                        delay: 5000
                    },
                    loop: true,
                    navigation: {
                            nextEl: '#top-next',
                            prevEl: '#top-prev'
                    },
                    // If we need pagination
                    pagination: {
                        el: '.top-pagination',
                         clickable: true
                    },
                    preventClicks: false,
                    on:{
                        click:function (e) {
                        e.clickedSlide.href && Livewire.navigate(e.clickedSlide.href)
                        }
                    }

                })
            }
        }">

                <div class="h-full swiper-wrapper">
                    @foreach($banner->img as $img)
                        <a href="{{$banner->link}}" class="swiper-slide h-full">
                            <div  style="background: url('{{\Illuminate\Support\Facades\Storage::url($img)}}') center no-repeat;background-size: 100%" class="h-full flex w-full rounded-md">
                            </div>
                        </a>
                    @endforeach

                </div>

            </div>
            <div class="w-[200px] h-[50px] mx-auto relative mt-6 flex justify-center items-center">
                <div class="swiper-pagination top-pagination w-full h-full"></div>
                <div class="w-10 h-10 swiper-button-next" id="top-next"></div>
                <div class="w-10 h-10 swiper-button-prev"  id="top-prev"></div>
            </div>
        </div>


        <div class="flex flex-col w-full text-white gap-2"  x-data="{
            colors:[
            'from-blue-300 bg-blue-300',
            'from-emerald-300 bg-emerald-300',
            'from-teal-300 bg-teal-300',
            'from-cyan-300 bg-cyan-300',
            'from-sky-300 bg-sky-300',
            'from-pink-300 bg-pink-300',
            'from-violet-300 bg-violet-300',
            'from-orange-300 bg-orange-300',
            'from-cyan-300 bg-cyan-300',
            'from-teal-300 bg-teal-300',
            'from-lime-300 bg-lime-300',
            'from-amber-300 bg-amber-300'
            ],
            init(){
                new Swiper('.last-section', {
                    slidesPerView: 5,
                    spaceBetween: 30,
                    navigation: {
                            nextEl: '#latest-next',
                            prevEl: '#latest-prev'
                    },
                    // If we need pagination
                    pagination: {
                        el: '.latest-pagination',
                        clickable: true
                    },
                    preventClicks: false,
                    on:{
                        click:function (e) {
                         Livewire.navigate(e.clickedSlide.href)
                        }
                    }

                })
            }
        }">
            <h1 class="text-2xl font-bold">最新上架</h1>
            <div class="text-base">The latest books on the shelf</div>
            <div class="w-full">
                <div class="swiper last-section  w-full mx-auto">
                    <div class="h-full swiper-wrapper">
                        @foreach($lastBook as $key => $book)
                            <a wire:navigate href="{{route('book',['book'=>$book->id])}}"  class="swiper-slide text-center h-full flex flex-col">
                                <div wire:key="{{$book->id}}" x-data="{
                                color: `${colors[{{$key}}]}`
                                }"  class="text-center h-full text-black flex w-full flex-col rounded-xl px-6 py-4 bg-gradient-to-b from-10% to-white backdrop-blur-lg text-white" :class="color">
                                    <div class="w-[150px] h-[200px] mx-auto my-2">
                                        <img wire:ignore src="{{\Illuminate\Support\Facades\Storage::url($book->img)}}" alt="" class="w-full h-full">
                                    </div>
                                    <div class="text-base font-semibold text-black">
                                        {{$book->title}}
                                    </div>
                                    <div class="my-2 text-sm text-gray-400">  {{$book->author}} 著</div>
                                    <div class="text-sm text-gray-400 h-10 overflow-ellipsis line-clamp-2">
                                        {{\Illuminate\Support\Str::limit($book->description,70,'...')}}
                                    </div>
                                </div>
                            </a>
                        @endforeach
                    </div>
                </div>
                <div class="w-[200px] h-[50px] mx-auto relative mt-6 flex justify-center items-center">

                    <div class="swiper-pagination latest-pagination w-full h-full"></div>
                    <div class="w-10 h-10 swiper-button-next cursor-pointer" id="latest-next"></div>
                    <div class="w-10 h-10 swiper-button-prev cursor-pointer"  id="latest-prev"></div>
                </div>
            </div>
        </div>



        <div class="flex flex-col w-full text-white gap-2"  x-data="{
            init(){
                new Swiper('.popular-section', {
                    slidesPerView: 7,
                    spaceBetween: 30,
                    navigation: {
                            nextEl: '#popular-next',
                            prevEl: '#popular-prev'
                    },
                    // If we need pagination
                    pagination: {
                        el: '.popular-pagination',
                        clickable: true
                    },
                    preventClicks: false,
                    on:{
                        click:function (e) {
                         Livewire.navigate(e.clickedSlide.href)
                        }
                    }
                })
            }
        }">
            <h1 class="text-2xl font-bold">最受欢迎</h1>
            <div class="text-base">The popular books on the shelf</div>
            <div class="w-full">
                <div class="swiper popular-section  w-full mx-auto">
                    <div class="h-full swiper-wrapper">
                        @foreach($popularBook as $key => $book)
                            <a wire:navigate href="{{route('book',['book'=>$book->id])}}"  class="swiper-slide text-center h-full">
                                <div wire:key="popular{{$book->id}}" class="text-center h-full text-black flex w-full flex-col text-white" >

                                    <div class="w-[150px] h-[200px] mx-auto my-2 rounded-xl overflow-hidden">
                                        <img wire:ignore src="{{\Illuminate\Support\Facades\Storage::url($book->img)}}" alt="" class="w-full h-full"  loading="lazy">
                                        <div class="swiper-lazy-preloader"></div>
                                    </div>
                                    <div class="text-base font-semibold ">
                                        {{$book->title}}
                                    </div>
                                </div>
                            </a>
                        @endforeach
                    </div>
                </div>
                <div class="w-[250px] h-[50px] mx-auto relative mt-6 flex justify-center items-center">

                    <div class="swiper-pagination popular-pagination w-full h-full"></div>
                    <div class="w-10 h-10 swiper-button-next cursor-pointer" id="popular-next"></div>
                    <div class="w-10 h-10 swiper-button-prev cursor-pointer"  id="popular-prev"></div>
                </div>
            </div>
        </div>


        <div class="flex flex-col w-full text-white gap-2"  x-data="{
            init(){
                new Swiper('.online-section', {
                    slidesPerView: 7,
                    spaceBetween: 30,
                    navigation: {
                            nextEl: '#online-next',
                            prevEl: '#online-prev'
                    },
                    // If we need pagination
                    pagination: {
                        el: '.online-pagination',
                        clickable: true
                    },
                    preventClicks: false,
                    on:{
                        click:function (e) {
                         Livewire.navigate(e.clickedSlide.href)
                        }
                    }
                })
            }
        }">
            <h1 class="text-2xl font-bold">在线阅读</h1>
            <div class="text-base">The Online books on the shelf</div>
            <div class="w-full">
                <div class="swiper online-section  w-full mx-auto">
                    <div class="h-full swiper-wrapper">
                        @foreach($readOnlineBook as $key => $book)
                            <a wire:navigate href="{{route('book',['book'=>$book->id])}}"  class="swiper-slide block text-center h-full">
                                <div wire:key="popular{{$book->id}}" class="text-center h-full text-black flex w-full flex-col text-white" >
                                    <div class="w-[150px] h-[200px] mx-auto my-2 rounded-xl overflow-hidden relative">
                                        <img wire:ignore src="{{\Illuminate\Support\Facades\Storage::url($book->img)}}" alt="" class="w-full h-full">
                                        <div class="absolute right-2 bottom-2 bg-black text-white p-1 rounded-md">
                                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
                                                <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
                                            </svg>

                                        </div>
                                    </div>
                                    <div class="text-base font-semibold ">
                                        {{$book->title}}
                                    </div>
                                </div>
                            </a>
                        @endforeach
                    </div>
                </div>
                <div class="w-[250px] h-[50px] mx-auto relative mt-6 flex justify-center items-center">

                    <div class="swiper-pagination online-pagination w-full h-full"></div>
                    <div class="w-10 h-10 swiper-button-next cursor-pointer" id="online-next"></div>
                    <div class="w-10 h-10 swiper-button-prev cursor-pointer"  id="online-prev"></div>
                </div>
            </div>
        </div>


        <div  class="flex flex-col w-full text-white gap-2">
            <h1 class="text-2xl font-bold">借阅记录</h1>
            <div class="text-base">The Borrow record on the shelf</div>
            <div class="flex flex-col gap-2">
                @foreach($borrowRecord as $borrow)
                    <div wire:key="borrow{{$borrow->id}}" class="flex w-full items-center pb-2 border-b border-gray-700">
                        <div class="flex gap-4  items-center basis-1/4">
                            <div class="h-[40px] w-[30px] overflow-hidden rounded-md">
                                <img wire:ignore src="{{\Illuminate\Support\Facades\Storage::url($borrow->book->img)}}" class="w-full h-full">
                            </div>
                            <div class="text-base hover:border-b-2 hover:border-gray-500 cursor-pointer">
                                <a wire:navigate href="{{route('book',['book'=>$book->id])}}"> {{$borrow->book->title}}</a>
                            </div>
                        </div>
                        <div class="flex-1 flex justify-center">
                            <x-filament::badge :color="$borrow->returned->getColor()">
                                {{$borrow->returned->getLabelText()}}
                            </x-filament::badge>
                        </div>
                        <div class="basis-1/4 text-right">
                            {{$borrow->member->name}}
                        </div>
                        <div class="text-sm text-gray-400 basis-1/4 text-right">
                            {{$borrow?->borrow_date?->diffForHumans()}}
                        </div>
                    </div>
                @endforeach

            </div>
        </div>

{{--        <div class="flex flex-col p-4 items-center justify-end pt-6 w-full">--}}
{{--            <div class="flex items-center pl-2 py-1 pr-1 rounded-full bg-gray-200 max-w-3xl sm:w-1/2">--}}
{{--                <input type="text" wire:model="keyword" class="flex-1 bg-gray-200 px-4 py-2 border-none focus:outline-none focus:border-transparent focus:ring-0 rounded-full" placeholder="搜索图书">--}}
{{--                <button x-on:click="$wire.search()" wire:loading.attr="disabled" class="bg-violet-500 text-white px-8 py-2 ml-2 hover:violet-blue-700 rounded-full min-w-20">搜索</button>--}}
{{--            </div>--}}
{{--        </div>--}}
{{--        <div class="flex flex-col">--}}
{{--            <div class="flex flex-col mt-20 justify-center items-center">--}}
{{--                <div class="text-red-500 font-medium text-4xl text-violet-700">每个人都有自己的文明</div>--}}
{{--                <div class="text-gray-500 my-4">--}}
{{--                    <p>图书馆共计{{$count}}套图书,您可以自由的借阅</p>--}}
{{--                </div>--}}
{{--            </div>--}}
{{--        </div>--}}
{{--        <div class="flex  justify-center items-center gap-20 p-20 max-w-full overflow-hidden">--}}
{{--            <div class="flex p-2 index1 cursor-pointer">--}}
{{--                <img class="h-[250px] w-fit object-cover rounded" src="/images/index1.svg">--}}
{{--            </div>--}}
{{--            <div class="flex text-black text-2xl font-bold text2 text-nowrap">--}}
{{--                "书籍是青年人的导师，是中年人的朋友，是老年人的慰藉。" - 富兰克林--}}
{{--            </div>--}}
{{--        </div>--}}
{{--        <div class="flex w-full justify-center items-center gap-20 p-20 max-w-full overflow-hidden">--}}

{{--            <div class="flex text-black text-2xl font-bold text1 text-nowrap">--}}
{{--                "读一本好书，就是和许多高尚的人谈话。" - 奥尔登·斯宾塞--}}
{{--            </div>--}}
{{--            <div class="flex p-2  index2 cursor-pointer">--}}
{{--                <img class="h-[250px] w-fit object-cover rounded" src="/images/index2.svg">--}}
{{--            </div>--}}
{{--        </div>--}}
{{--        <div class="w-full py-20 text-center text-gray-500 font-semibold text-4xl">--}}
{{--            推荐阅读--}}
{{--        </div>--}}
{{--        <div class="w-4/5 mx-auto">--}}
{{--            <div class="grid grid-cols-4 gap-10 px-10 " wire:transition.opacity>--}}
{{--                @foreach($books as $book)--}}
{{--                    <x-project.book-item :book="$book"/>--}}
{{--                @endforeach--}}

{{--            </div>--}}
{{--            <div class="flex flex-col justify-center items-center w-full py-20 gap-1">--}}
{{--                <svg wire:loading xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 animate-spin text-gray-400">--}}
{{--                    <path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99" />--}}
{{--                </svg>--}}
{{--                <button x-show="!$wire.reachedEnd" class="bg-none border-none text-gray-400 p-2 rounded" x-on:click="$wire.loadData()">加载更多</button>--}}
{{--                <p x-show="$wire.reachedEnd" class="text-gray-400 text-[16px]">没有更多了</p>--}}
{{--            </div>--}}
{{--        </div>--}}
        <style>
            .swiper-pagination{
                line-height: 44px !important;
            }
            .swiper-pagination-bullet{
                background: #fff6 !important;
            }
            .swiper-button-prev, .swiper-button-next{
                width: 24px !important;
                height: 24px !important;
                background: #666360;
                color: #FFFFFF;
                border-radius: 5px;
            }
            .swiper-button-prev::after, .swiper-button-next::after{
                font-size: 14px;
                color: #FFFFFF;
            }
        </style>
    </div>

    @assets
    <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js" defer></script>
    <link
        rel="stylesheet"
        href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"
    />
    @endassets

    @script
    <script>
        console.log('init')
        /** sr.reveal('.index1', {
                origin: 'left',
                distance: '100px',
                duration: 1000,
                delay: 200,
                easing: 'ease-in-out',
            });
         sr.reveal('.index2', {
                origin: 'right',
                distance: '100px',
                duration: 1000,
                delay: 200,
                easing: 'ease-in-out',
            });
         sr.reveal('.text2', {
                origin: 'right',
                distance: '60px',
                duration: 500,
                delay: 200,
                easing: 'ease-in-out',
            });
         sr.reveal('.text1', {
                origin: 'left',
                distance: '60px',
                duration: 500,
                delay: 200,
                easing: 'ease-in-out',
                reset: true,
            });
         **/
    </script>
    @endscript

